<template>
  <div class="type">
    <div class="search">
      <van-icon name="arrow-left" @click.native="goBack" />
      <van-search placeholder="请输入搜索关键词" v-model="value" />
    </div>
    <div class="nav-left">
      <van-sidebar v-model="flower">
        <van-sidebar-item title="百果园" />
        <van-sidebar-item title="时令鲜果" />
        <van-sidebar-item title="地方农产" />
        <van-sidebar-item title="海鲜水产" />
      </van-sidebar>
    </div>
    <div class="main">
    <router-view></router-view>
    </div>
   <Footer></Footer>
  </div>
</template>
<style lang="less" scoped>
.type {
  height: 100%;
  width: 100%;
  .search {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    align-items: center;
    padding:4px 0 8px;
    background: white;
    margin-bottom: 5px;
    z-index: 99;
    .van-icon {
      width: 5%;
      padding-left: 5px;
      font-size: 20px;
    }
    .van-search {
      width: 95%;
      height: 38px;
      border-radius: 10px;
    }
  }
  .nav-left {
    top: 50px;
    position: fixed;
    left: 0;
    background: white;
    margin-right: 2px;
    height: 100%;
    z-index: 10;
  }
  .main {
    padding-top: 50px;
    padding-left: 90px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: white;
    width: 100%;
    box-sizing: border-box;
  
  }
}
</style>
<script>
import Footer from '@/components/Footer'
export default {
     components:{
        Footer
    },
  data() {
    return {
      flower: 0,
      value: ""
    };
  },
  methods: {
    goBack() {
      this.$router.push("/");
    }
  }
};
</script>